<template>
	<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="90%">
		<el-card shadow="hover" class="layout-padding-auto">
			<div class="system-gen-search">
				<el-row :gutter="20">
					<el-col :span="24">
						<el-input size="default" placeholder="请输入表名称" v-model="state.tableData.param.tableName"
							class="mt10"></el-input>
						<el-input size="default" placeholder="请输入表描述" v-model="state.tableData.param.tableComment"
							class="mt10"></el-input>
						<el-button size="default" class="mt10" type="primary" @click="getTableData()">
							<el-icon>
								<ele-Search />
							</el-icon>
							搜索
						</el-button>
						<el-button size="default" class="mt10" type="info" @click="resetParamData()">
							<el-icon>
								<ele-Refresh />
							</el-icon>
							重置
						</el-button>
					</el-col>
				</el-row>
			</div>
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%"
				ref="multipleTableRef" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" />
				<el-table-column prop="tableName" label="表名称" width="100" show-overflow-tooltip></el-table-column>
				<el-table-column prop="tableComment" label="表描述" show-overflow-tooltip></el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="100" show-overflow-tooltip></el-table-column>
				<el-table-column prop="updateTime" label="更新时间" show-overflow-tooltip></el-table-column>
			</el-table>
			<el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15 paginationFlex"
				:pager-count="5" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.pageNum" background
				v-model:page-size="state.tableData.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
				:total="state.tableData.total">
			</el-pagination>
		</el-card>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onCancel" size="default">关闭</el-button>
				<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts" name="toolGenDialog">
import { reactive, ref } from 'vue';
import { ElMessage, ElTable } from 'element-plus';
import { useGenApi } from '/@/api/tool/gen';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<RowUserType[]>([])

const state = reactive({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		dateRange: [], // 时间范围
		param: {
			pageNum: 1,
			pageSize: 10,
			tableName: undefined,
			tableComment: undefined,
		},
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '导入数据库表',
		submitTxt: '确定',
	},
});
/**
 * 多选
 */
const handleSelectionChange = (val: RowUserType[]) => {
	multipleSelection.value = val
}
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
	emit('refresh');
};
/**
 * 初始化 表单 
 * @description 获取数据库信息
 */
const getTableData = async () => {
	state.tableData.loading = true;
	const res = await useGenApi().listDbTable(state.tableData.param);
	state.tableData.loading = false;
	if (res.code === 200) {
		state.tableData.data = res.rows;
		state.tableData.total = res.total;
	} else {
		ElMessage.error(res.msg);
	}
}

/**
 * 打开弹窗
 * @param type
 * @param row
 */
const openDialog = () => {
	state.dialog.isShowDialog = true;
	resetParamData();
};

/**
 * 提交
 * */
const onSubmit = () => {
	if (multipleSelection.value.length === 0) {
		ElMessage.warning('请选择要导入的表');
		return;
	}
	const tableNames = multipleSelection.value.map((item) => item.tableName).join(',');
	useGenApi().importTable({ tables: tableNames }).then((res) => {
		if (res.code === 200) {
			ElMessage.success(res.msg);
			onCancel()
		} else {
			closeDialog();
			ElMessage.error(res.msg);
		}
	});
};


/**
 * 重置参数
 */
const resetParamData = () => {
	state.tableData.param = {
		pageNum: 1,
		pageSize: 10,
		tableName: undefined,
		tableComment: undefined,
	}
	getTableData();
};


// 分页改变
const onHandleSizeChange = (val: number) => {
	state.tableData.param.pageSize = val;
	getTableData();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.tableData.param.pageNum = val;
	getTableData();
};

// 暴露变量
defineExpose({
	openDialog,
});

</script>

<style scoped lang="scss">
.system-role-dialog-container {
	.menu-data-tree {
		width: 100%;
		border: 1px solid var(--el-border-color);
		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
		padding: 5px;
	}
}
</style>
